<template>
  <f7-page infinite :infinite-distance="50" :infinite-preloader="true" @infinite="handleInfinite"
    class="common-page has-bottom-btns">
    <f7-navbar>
      <f7-nav-left>
        <f7-link back icon-material="chevron_left" force @click="handleBack"></f7-link>
      </f7-nav-left>
      <f7-nav-title>移动机械</f7-nav-title>
      <f7-nav-right> </f7-nav-right>
    </f7-navbar>
    <van-tabs v-model="activeIndex" @click="changeStatus()">
      <van-tab title="设备列表" name="1">
        <equip-list ref="equip" :engineeId="engineeId" :isSupervisor="isSupervisor" :isSupOrg="isSupOrg"></equip-list>
      </van-tab>
      <van-tab title="机械管理员" name="2">
        <div class="top-search">
          <van-search v-model="search.personName" @search="handleSearch" shape="round" background="#F7F8FA" placeholder="搜索姓名"
            right-icon="search" left-icon="" />
        </div>
        <f7-list media-list class="search-list" v-if="query.data.length > 0">
          <li v-for="(item, index) in query.data" :key="index" @click="onDetail(2, item)" class="content-box">
            <div class="avatar" v-if="!item.mngAttachmentId">
              {{item.personName? item.personName.substr(item.personName.length - 1, 1): "--"}}
            </div>
            <img :src="$util.getImgSrc(item.mngAttachmentId)" class="avatar" alt="" v-else />
            <div class="right-box">
              <div class="title-box">
                <h3>
                  {{ item.personName }}
                </h3>
                <van-icon name="arrow" color="#CED6E0" />
              </div>
              <p>{{ item.orgName || "--" }}</p>
            </div>
          </li>
        </f7-list>
        <v-empty v-else description="暂无数据" style="padding-top: 67px !important" />
      </van-tab>
      <van-tab title="操作人员" name="3">
        <div class="top-search">
          <van-search v-model="search.personName" @search="handleSearch" shape="round" background="#F7F8FA"
            placeholder="搜索姓名" right-icon="search" left-icon="" />
        </div>
        <f7-list media-list class="search-list" v-if="query$1.data.length > 0">
          <li v-for="(item, index) in query$1.data" :key="index" @click="onDetail(3, item)" class="content-box">
            <div class="avatar" v-if="!item.attachmentId">
              {{
                  item.personName? item.personName.substr(item.personName.length - 1, 1): "-"
                  }}
            </div>
            <img :src="$util.getImgSrc(item.attachmentId)" class="avatar" alt="" v-else />
            <div class="right-box">
              <div class="excavationName">
                <span>
                  {{ item.personName || "--" }}
                </span>
                <div class="name-right">
                  <span class="tag" :class="{
                    'tag-blue': item.useType == '在用',
                    'tag-gray': item.useType == '曾用',
                  }">{{ item.useType }}</span>
                  <van-icon name="arrow" />
                </div>
              </div>
              <div style="display: flex; align-items: center">
                <div style="flex: 1">
                  <p>{{ item.orgName }}</p>
                  <!-- <p>进场时间：{{ item.enterTime | date("yyyy-MM-dd") }}</p> -->
                </div>
                <img src="../../../../assets/img/qzjx/mobile/icon_overtime.png" alt="" class="csImg" v-if="item.csType"
                  style="background: #fff" width="43" />
              </div>
            </div>
          </li>
        </f7-list>
        <v-empty v-else description="暂无数据" style="padding-top: 67px !important" />
      </van-tab>
    </van-tabs>
    <f7-toolbar position="bottom" no-shadow class="fff" v-if="activeIndex == 1 && isConOrg">
      <f7-button fill class="submit-btn" @click="onEnterCheck()">设备进场验收</f7-button>
    </f7-toolbar>
    <f7-toolbar position="bottom" no-shadow class="fff"  v-if="activeIndex == 2 && isConOrg">
      <f7-button fill class="submit-btn" @click="onAdminCreate('manager')" v-if="activeIndex == 2 && isConOrg">人员登记</f7-button>
    </f7-toolbar> 
    <f7-toolbar position="bottom" no-shadow class="fff" v-if="activeIndex == 3">
      <van-goods-action-icon icon="notes-o" text="培训记录" v-if="isConOrg" @click="onTrainRecord()" color="#3385FF" />
      <f7-button fill class="submit-btn plain-btn" @click="onTrainRecord()" v-else>培训记录</f7-button>
      <f7-button fill class="submit-btn plain-btn" @click="onTrainCreate()" v-if="isConOrg">人员培训</f7-button>
      <f7-button fill class="submit-btn" @click="onAdminCreate('oprator')" v-if="isConOrg">人员登记</f7-button>
    </f7-toolbar>
  </f7-page>
</template>

<script>
import controller from "@/libs/framework/controller";
import equipList from "./equip/list";

export default class instance extends controller {
  onBeforeInit() {
    this.urls = {
      model: "/app/equipment/eqmRepair/getListModel",
      query: [
        "/app/equipment/eqmMobileManager/query",
        "/app/equipment/eqmPrjJobPerson/query",
      ],
    };
  }
  onInit() {//904ad8612e7145e9a1b0d4870e18cd7b TEST
    this.context.engineeId = this.$f7route.query.engineeId;
    if (this.$util.isDev() && !this.$f7route.query.engineeId) {
      this.context.engineeId = "215042AE-B43B-8564-541C-44E0544A706D";
    }
    this.setSearch("engineeId", this.context.engineeId, "list");
    this.setSearch("engineeId", this.context.engineeId, "list$1");
  }

  onAfterQuery(type, isSuccess, result) {
    if (type == "list") {
    }
    return result;
  }

  mixin() {
    return {
      components: {
        equipList,
      },
      data() {
        return {
          search: {},
          activeIndex: 1,
          engineeId: "", // 工程id
          isConOrg: 0,
          isSupervisor: 0,
          isSupOrg: 0
        };
      },
      mounted() {
        this.activeIndex = this.$f7route.query.activeIndex?this.$f7route.query.activeIndex:window.localStorage.getItem("mobileEquipmentIndex");
        this.getPermission();
      },
      methods: {
        // 获取权限
        getPermission() {
          this.$f7.request.post(
            `/app/equipment/eqmMobileRegister/getPermission`, {
            engineeId: this.engineeId
          },
            (r) => {
              r = JSON.parse(r);
              if (r && r.success) {
                this.isConOrg = r.parameters.isConOrg ? 1 : 0;
                this.isSupervisor = r.parameters.isSupervisor ? 1 : 0;
                this.isSupOrg = r.parameters.isSupOrg ? 1 : 0;
                window.localStorage.setItem("mobileEquip-isConOrg", r.parameters.isConOrg ? 1 : 0);//施工
                window.localStorage.setItem("mobileEquip-isSupOrg", r.parameters.isSupOrg ? 1 : 0);//监理
                window.localStorage.setItem("mobileEquip-isSupervisor", r.parameters.isSupervisor ? 1 : 0);//监督员
              }
            },
            (err) => { }
          );
        },
        // tab切换
        changeStatus() {
          window.localStorage.setItem("mobileEquipmentIndex", this.activeIndex);
          if (this.activeIndex == 2) {
            this.searchQuery(this.search, "list");
          } else if (this.activeIndex == 3) {
            this.searchQuery(this.search, "list$1");
          }
        },
        handleSearch() {
          if (this.activeIndex == 2) {
            this.searchQuery(this.search, "list");
          } else if (this.activeIndex == 3) {
            this.searchQuery(this.search, "list$1");
          }
        },
        // 详情
        onDetail(index, item) {
          if (index == 2) {
            // 机械管理员
            this.$f7router.navigate(
              `/business/qzjx/mobileEquipment/administrator/detail?pageAction=view&managerId=${item.managerId}`
            );
          } else if (index == 3) {
            // 操作人员
            this.$f7router.navigate(
              `/business/qzjx/mobileEquipment/operator/detail?pageAction=view&personPkid=${item.personPkid}`
            );
          }
        },
        onEnterCheck(){// 进场验收
          this.$f7.view.current.router.navigate(
              `/business/qzjx/mobileEquipment/equip/entryCheck?engineeId=${this.engineeId}&action=processStart&appCode=mobileMachineryReg&version=1&isDelay=false`
            );
        },
        onAdminCreate(personType){// 人员登记
          this.$f7router.navigate(
              `/business/qzjx/mobileEquipment/administrator/create?engineeId=${this.engineeId}&personType=${personType}`
            );
        },
        // 培训记录
        onTrainRecord() {
          this.$f7router.navigate(
            `/business/qzjx/mobileEquipment/operator/trainRecord?pageAction=view&engineeId=${this.engineeId}`
          );
        },
        // 培训登记
        onTrainCreate() {
          this.$f7router.navigate(
            `/business/qzjx/mobileEquipment/operator/trainCreate?pageAction=create&engineeId=${this.engineeId}`
          );
        },
        // 上拉加载
        handleInfinite() {
          if (this.activeIndex == 2) {
            this.infinite('list');
          } else if (this.activeIndex == 3) {
            this.infinite('list$1');
          }
        },
        handleBack() {
          window.localStorage.removeItem("mobileEquipmentIndex");
        }
      }
    };
  }
}
</script>

<style lang="less" scoped>
@import url("../../../../assets/css/commonPage.less");

.common-page @{deep}.van-tabs {
  .van-tabs__wrap {
    width: 100%;
    z-index: 99;
  }

  .van-tabs__line {
    width: 40px;
  }
}

.common-page .search-list {
  padding-top: 67px;
}

@{deep}.van-goods-action-icon{
  color: #3385FF;
  margin-left: 10px;
}

@{deep} .search-list {
  ul {
    li {
      .excavationName {
        font-size: 16px;
        font-weight: 600;
        color: #242424;
        display: flex;
        justify-content: space-between;
        align-items: center;
        justify-content: space-between;

        .van-icon {
          color: #ced6e0;
        }

        .name-right {
          display: flex;
          align-items: center;
        }
      }

      img,
      .avatar {
        object-fit: cover;
        margin-right: 9px;
        width: 49px;
        height: 49px;
        text-align: center;
        line-height: 49px;
        background: #eef5fe;
        color: #158fff;
        border-radius: 49px;
        font-size: 20px;
      }

      img,
      .cerImg {
        width: 60px;
        height: 80px;
        margin-right: 9px;
        border-radius: 0;
      }
      .csImg{
        width: 43px;
        height: 43px;
      }
      .right-box {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;

        p {
          margin: 0;
          font-size: 13px;
          color: #737d8a;
          margin-top: 8px;
        }

        .tag {
          border: none;
          margin-right: 12px;
          font-size: 13px;

          &.tag-blue {
            color: #1990ff;
          }

          &.tag-orange {
            color: #ff9f24;
          }

          &.tag-gray {
            color: #8995ac;
          }
        }
      }
    }
  }
}

.top-search {
  position: fixed;
  z-index: 99;
  width: 100%;
  display: flex;
  align-items: center;
  height: 57px;
  background: #fff;
  padding: 0 16px;
  box-sizing: border-box;
  border-top: 1px solid #eeeeee;

  .van-search {
    height: 35px;
    flex: 1;
    border-radius: 17.5px;
  }
}
</style>
